<template>
    <div id='details'>
        <P></P>
        <!-- {{detail}} -->

        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品名称</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-input v-model="detail.name" disabled></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品描述</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-input v-model="detail.subtitle" disabled></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品状态</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-input value="已下架" v-if="detail.status==2" disabled></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>所属分类</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-select v-model="value" placeholder="请选择" style="opacity: .5;">
                    <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.id" disabled>
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品价格</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-input v-model="detail.price" disabled>
                    <template slot="append">元</template>
                </el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品库存</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-input v-model="detail.stock" disabled>
                    <template slot="append">件</template>
                </el-input>
            </el-col>
        </el-row>
        <el-row class="hcol">
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品图片</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <img style=" margin-right:10px; width:100px; height:100px;" v-for="(item,key) in img" :key="key"
                    :src="detail.imageHost+item" alt="">
            </el-col>
        </el-row>
        <el-row>
            <el-col :xs="24" :sm="24" :md="3" :lg="3" :xl="3">
                <h4>商品详情</h4>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                <el-input v-html="detail.detail" disabled></el-input>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    import {} from 'vuex'
    import {
        productDetail,
        options
    } from '../../../api/index'
    import P from '../P.vue';
    import {
        Form,
        FormItem,
        Input,
        Row,
        Col,
        Select,
        Option
    } from 'element-ui'
    export default {
        components: {
            P,
            'el-form': Form,
            'el-form-item': FormItem,
            'el-input': Input,
            'el-row': Row,
            'el-col': Col,
            'el-select': Select,
            'el-option': Option,
        },
        data() {
            return {
                detail: {},
                img: [],
                options: [],
                value: ''
            };
        },
        methods: {
            async getdetail(id) {
                this.img = ''
                let {
                    data: res
                } = await productDetail({
                    productId: id
                })
                console.log(res);
                this.detail = res.data
                this.img = this.detail.subImages.split(',')
                console.log(this.img);
            },
            async getopt() {
                let res = await options()
                console.log(res);
                this.options = res.data.data
                console.log(this.options);
                console.log(this.detail.categoryId);
                var index = this.options.filter(res => {
                    return res.id == this.detail.categoryId
                })
                console.log(index);
                this.value = index[0].name
            },
        },

        mounted() {
            this.getopt()
            const id = this.$route.query.id
            console.log(id);
            this.getdetail(id)

        },
        computed: {}
    }
</script>
<style lang='scss' scoped>
    #details {
        .el-row {
            height: 50px;
        }

        .hcol {
            height: 140px;
            display: flex;
            flex-direction: column;

            .el-col {
                display: flex;
                align-items: flex-start;

                h4 {
                    height: 0;
                }
            }

        }

        .el-col {
            height: 100%;
            display: flex;
            align-items: center;

        }
    }
</style>